<template>
  <div class="changeDistri">
    <div class="title">
      <label class="g-font-f2">涨跌股票统计(只)</label>&nbsp;&nbsp;
      <span data-v-495ab959="" class="g-font-f5">更新于{{updateTime | dataTimeFormat4}}</span>
    </div>
    <tab-bar :tab-bar="menuTabBar" :on-selected="onBarSelected" :select-index="msgBar"></tab-bar>
<!--     <ul class="legend">
      <li><p></p>上涨 <span v-text="advance"></span>只</li>
      <li><p></p>平盘 <span v-text="flat"></span>只</li>
      <li><p></p>下跌 <span v-text="plummet">100</span>只</li>
    </ul> -->
    <div class="load">
      <loading :own-state="ownState"></loading>
      <error :own-state="errorState"></error>
      <div ref="box" style="height:2rem;width:100%;">
      </div>
    </div>
    <div class="interval"></div><!--间隔-->
    <div class="currentUpDown">
      <router-link to="/currentChange"><div class="flexP">当前涨跌 <p><span>涨停{{currentUpDown.nULN}}只<i> / </i></span>&nbsp;<span>跌停{{currentUpDown.nDLN}}只</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="~assets/images/left.png" alt=""></p></div></router-link>
      <router-link to="/rapidChange"><div class="flexP">急涨急跌 <p><span>急涨{{currentUpDown.nRTUN}}只<i> / </i></span>&nbsp;<span>急跌{{currentUpDown.nRTDN}}只</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="~assets/images/left.png" alt=""></p></div></router-link>
    </div>
  </div>


</template>

<script>
import tabBar from '@/components/common/TabBar'
import echarts from 'echarts/lib/echarts';
import remoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'
import {extend, getNowTime} from '@/common/common'
import {dataTimeFormat4} from '@/filters/dataTime'

const option = {
  tooltip: {
    show: false
  },
  grid: {
    left: '2%',
    right: '4%',
    top: '9%',
    bottom: '16%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    data: ['跌停', '跌停~-5%', '-5%~-1%', '-1~1%', '1%~5%', '5%~涨停', '涨停'],
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#999999'
      }
      // show: false
    },
    axisLabel: {
      interval: 0,
      rotate: 45
    }
  }],
  yAxis: [{
    type: 'value',
    splitNumber: 4,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      formatter (value, index) {
        return value / 1000 < 1 ? value
          : value % 1000 == 0 ? value / 1000 + 'k'
          : (value / 1000).toFixed(1) + 'k'
      },
      textStyle: {
        color: '#999999'
      }
    },
    splitLine: {
      lineStyle: {
        type: 'dotted',
        color: 'rgb(0, 0, 0)',
        opacity: 0.2
      }
    }
  }],
  series: {
    type: 'bar',
    barWidth: 20,
    label: {
      normal: {
        textStyle: {
          color: '#555555'
        },
        show: true,
        position: 'top'
      }
    },
    itemStyle: {
      normal: {
        color: function(params) {
          switch (params.name) {
            case '跌停':
              return '#1aae52';
            case '跌停~-5%':
              return '#1aae52';
            case '-5%~-1%':
              return '#1aae52';
            case '-1~1%':
              return 'rgb(186,201,216)';
            case '1%~5%':
              return '#eb333b';
            case '5%~涨停':
              return '#eb333b';
            case '涨停':
              return '#eb333b';
          }
        }
      }
    }
  }
};
export default {
  name: 'change-distri',
  data () {
    return {
      isUnactivated: false,
      myChart: '',
      msgBar: 0,
      menuTabBar: [{name: '全部'}, {name: '沪市'}, {name: '深市'}, {name: '创业板'}],
      ownState: true,
      errorState: false,
      currentUpDown: {},   // 当然涨跌股票数量
      updateTime: '',
      date: ''
    }
  },
  components: {
    tabBar
  },
  filters: {
    dataTimeFormat4
  },
  methods: {
    changeObj (data) {
      return {
        nDLN: data.nDLN | '0',
        nD105N: data.nD105N | '0',
        nD51N: data.nD51N | '0',
        nD1U1N: data.nD1U1N | '0',
        nU15N: data.nU15N | '0',
        nU510N: data.nU510N | '0',
        nULN: data.nULN | '0'
      }
    },
    onBarSelected (index) {
      if (this.msgBar == index) {
        return;
      } else {
        this.ownState = true;
        this.msgBar = index;
        this.getChangeDistribution();
        this.$store.dispatch('choseTabBar', index);
      }
    },
    // 获取当前涨跌股票数
    getRapidChange () {
      let vm = this;
      remoteDAO.invoke(constant.InterfaceEnum.GET_RAPID_CHANGE, null).then(result => {
        vm.currentUpDown = result
      })
    },
    // 获取图表数据
    getChangeDistribution () {
      let vm = this;
      remoteDAO.invoke(constant.InterfaceEnum.GET_CHG_DIS, {type: vm.msgBar, date: vm.date}).then((result) => {
        let res = vm.changeObj(result)
        vm.updateTime = result.time.substr(8);
        let resultData = Object.values(res);
        let object = extend(option, {
          series: {
            data: resultData
          }
        });
        if (!vm.myChart) {
          vm.myChart = echarts.init(vm.$refs.box);
        }
        vm.myChart.setOption(object);
        vm.ownState = false;
      }, () => {
        vm.ownState = false;
        vm.errorState = true;
      });
    }
  },
  mounted () {
    var vm = this;

    vm.date = getNowTime();
    vm.msgBar = vm.$store.state.tabBarMsg;

    vm.$loop.register(this.getRapidChange, this.getChangeDistribution);
  },
  activated () {
    if (this.isUnactivated) {
      this.$loop.register(this.getRapidChange, this.getChangeDistribution);
      this.isUnactivated = false;
    }
  },
  beforeDestroy () {
    echarts.dispose(this.myChart);
    this.$loop.unregister(this.getRapidChange, this.getChangeDistribution);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
 @import '../../../assets/css/variables.less';
  .changeDistri{
  height:auto;
  width:100%;
  .flexP{
    font-size: 0.16rem;
    margin: 0 auto;
    width:90%;
    display:flex;
    align-items: center;
    color: #222222;
    font-family: PingFangSC-Regular;
    text-align: left;
    border-bottom: 1px solid #dddddd;
    &.no-bottom{
      border-bottom: none;
      margin: .15rem auto;
    }
    span{
      font-size: 0.12rem;
      color:#999999;
      font-family: PingFangSC;
      i {
        color: #999999;
      }
    }
  }
  }
  .load{
    height:2rem;
    position: relative;
    margin-bottom: 0.2rem;
    .loading{
      height:1.5rem;
    }
  }
  .legend{
    width: 80%;
    height:0.15rem;
    li{
      width: 33%;
      float: left;
      font-size: 0.12rem;
      p{
        width: 0.12rem;
        height:0.12rem;
        background:#eb333b;
        margin-top: 0.02rem;
        border: none;
        float: left;
      }
      span{
         color:#eb333b;
      }
    }
    li:nth-child(2){
      p{
        background:rgb(186,201,216);
      }
      span{
        color:rgb(108,155,210);
      }
    }
    li:last-child{
      p{
        background:#1aae52;
      }
      span{
        color:#1aae52;
      }
    }
  }
  .currentUpDown{
   a{
     text-decoration: none;
     display: block;
     .flexP{
       display: flex;
       justify-content: space-between;
       p{
         white-space: nowrap;
         height: 100%;
         display: inline-flex;
         align-items: center;
         span:nth-of-type(1){
           color:#eb333b;
         }
         span:nth-of-type(2){
           color:#1aae52;
         }
         img{
           height: 0.16rem;
         }
       }
     }
   }
   a:last-child{
     div{
       border-bottom: none;
     }
   }
  }
  .title {
    text-align: left;
    margin: 0.18rem;
  }
</style>
